<template>
  <view class="item" @click="clickItem">
    <view class="item_image">
      <image :src="item.coverPath" />
    </view>
    <view class="right">
      <view class="name hid2">
        {{ item.name }}
      </view>
      <view class="study" v-if="type == 'course'"> 学习进度10% </view>
      <view class="study" v-if="type == 'collection'"> 共10课时 </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "study-card",
  props: {
    type: {
      type: String,
      default: "", // course课程  collection收藏
    },
    item: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    clickItem() {
      this.$u.route("/pages/course-detail/course-detail", {
        id: this.item.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  padding: 40upx 30upx;
  width: 690upx;
  height: 200upx;
  background: #ffffff;
  box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
  border-radius: 20upx;
  margin-bottom: 30upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item_image {
    width: 180upx;
    height: 120upx;
    border-radius: 10upx;
    overflow: hidden;
    flex-shrink: 0;
  }

  .right {
    margin-left: 30upx;
    width: 420upx;

    .name {
      height: 80upx;
      font-weight: bold;
      line-height: 40upx;
    }

    .study {
      margin-top: 6upx;
      font-size: 24upx;
      line-height: 34upx;
      color: #999999;
    }
  }
}
</style>
